<template>
	<view class="filterWrapper">
		<!--<view class="title-padding"></view>-->
		<!-- <view class="filterHeader">
			<text class="pd" @tap="back()"></text>
			<text class="title">筛选</text>
			<view class="options">
				<button class="setting" @tap="changeDate()"></button>
			</view>
		</view> @tap="changeShow('QS_Picekr_date',0)" -->
		<view class="filterItem" type="primary">
			<text>
				起始日期
			</text>
			<!-- 			<text  @tap="show(1)">
				{{startTime}}
			</text> -->
			<picker mode="date" :value="startTime" @change="DateChange1">
				<view class="picker">
					{{startTime}}
				</view>
			</picker>
		</view>
		<view class="filterItem" type="primary">
			<text>
				终止日期
			</text>
			<picker mode="date" :value="endTime" @change="DateChange2">
				<view class="picker">
					{{endTime}}
				</view>
			</picker>
		</view>
		<view class="filterItem">
			<text>
				单号
			</text>
			<input type="text" placeholder="点击输入单号" v-model="BillNo"/>
			<button class="cu-btn stop text-white"  @tap="clearFilter(0)">清空</button>
			<!-- <input type="text" placeholder="单号" v-model="BillNo" /> -->
		</view>
		<view class="filterItem">
			<text>
				往来单位
			</text>
			<input type="text" placeholder="点击选择往来单位" :value="BName"  @tap="showBName()" disabled/>
			<button class="cu-btn stop text-white"  @tap="clearFilter(1)">清空</button>
		</view>
		<view class="filterItem">
			<text>
				仓库名称
			</text>
			<input type="text" placeholder="点击选择仓库" :value="StoreName" @tap="chooseModal(0)" disabled/>
			<!-- <view class="selectInput" > -->
				<!-- <xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="'height: 40px; font-size: 16px;'"
				 :selectHideType="'hideAll'" @change="getSelectValue($event)">
				</xfl-select> -->
				<!-- {{StoreName==''?'点击选取仓库':StoreName}} -->
			<!-- </view> -->
			<button class="cu-btn stop text-white" @tap="clearFilter(2)">清空</button>
		</view>
		<view class="filterItem">
			<text>
				业务员
			</text>
			<input type="text" placeholder="点击选择业务员" :value="OperatorName" @tap="chooseModal(1)" disabled/>
			<button class="cu-btn stop text-white" @tap="clearFilter(3)">清空</button>
			<!-- <view class="selectInput" @tap="chooseModal(1)">
				{{OperatorName==''?'点击选取业务员':OperatorName}}
			</view> -->
		</view>
		<!-- <view class="filterItem">
			<text>
				
			</text>
			<text>
				
			</text>
			<button class="cu-btn stop text-white" @tap="filterSure()">确定</button> -->
			<!-- <view class="selectInput" @tap="chooseModal(1)">
				{{OperatorName==''?'点击选取业务员':OperatorName}}
			</view> -->
		<!-- </view> -->
		<!-- <QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date" pickerId="date_1" :dataSet="dateSet"
		 showReset :autoHide="false" contentColor="#33cc33" :lineHeight=".05" @hideQSPicker="hideQSPicker($event)"
		 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" /> -->

		<view class="cu-modal" :class="StoreModal ?'show':'hide'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{isStore?'请选择仓库':'请选择业务员'}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white">
					<view class="searchStore">
						<input :placeholder="isStore?'请输入仓库名称或编号':'请输入业务员名称'" 
						placeholder-style="text-align: left; font-size: 14px;"
						 v-model="SearchName" @input="filter"/>
						<button @tap="searchStore">搜索</button>
					</view>
					<view class="StoreListWrap">
						<view v-for="(item,index) in TempEList" :key="index" @tap="selectScanGood(index)">{{item.Name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue'
	import * as Api from '@/syApis/syBb/apis.js'
	import * as Api1 from '@/syApis/syAddOrder/syaddApis.js'
	export default {
		components: {
			// QSpicker,
			// tuiDatetime
		},
		data() {
			return {
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']
				},
				startTime: 0,
				result: "",
				isStore: true,
				StoreModal: false,
				EList: [],
				SearchName: "",
				showcxbtn: false,
				startAndEndTime: 0,
				// startTime: 0,
				endTime: 0,
				dateName: "",
				ClientName: "",
				GoodsName: "",
				EmpList: [],
				//单号
				BillNo: "",
				//往来单位
				BName: "",
				//仓库
				StoreName: "",
				//业务员
				OperatorName: "",
				EmpID: "",
				StoreID: '',
				TempEList:[]
			};
		},
		created() {
			let date = new Date();
			this.getTime();
		},
		onShow(){
			this.$eventHub.$off('clientListen');
		},
		methods: {
			clearFilter(type){
				if(type==0){
					this.BillNo = "";
				}else if(type==1){
					this.BName = "";
				}else if(type==2){
					this.StoreName = "";
					this.StoreID = "";
				}else{
					this.OperatorName = "";
					this.EmpID = "";
				}
			},
			//过滤仓库
			filter(e){
				console.log(e.detail.value);
				let TempList = [];
				 this.EList.forEach((item,index)=>{
					    if(item.Name.indexOf(e.detail.value)>-1){
							TempList.push(item);
						}
				 });
				 if(TempList.length==0){
					 Api.showTip("查无数据");
				 }
				 this.TempEList = TempList;
				
			},
			//起始日期
			DateChange1(e) {
				this.startTime = e.detail.value
			},
			//结束日期
			DateChange2(e) {
				this.endTime = e.detail.value
			},
			getTime() {
				let yyyy = new Date().getFullYear();
				let mm = (new Date().getMonth() + 1)< 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1);
				let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
				this.startTime = yyyy + '-' + mm + '-' + dd;
				this.endTime = yyyy + '-' + mm + '-' + dd;
			},
			//显示仓库
			ShowStore(Filter = '') {
				let data = {
					Filter: Filter
				};
				var that = this;
				Api.GetStoreMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							// api.showTip()
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg)
						} else {
							res.data.ResultMsg.forEach((item, index) => {
								res.data.ResultMsg[index].Name = item.StoreName;
							})
							that.EList = res.data.ResultMsg;
							that.TempEList = res.data.ResultMsg;
							that.SearchName = "";
							// that.ClientNameList =JSON.stringify(res.data.ResultMsg) ;
						}
					} else {
						Api.showTip("服务器连接超时")
					}
				});
			},
			//显示业务员
			ShowOperator(Filter = '') {
				let data = {
					Filter: Filter
				};
				var that = this;
				Api.GetOperatorMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							// api.showTip()
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg)
						} else {
							res.data.ResultMsg.forEach((item, index) => {
								res.data.ResultMsg[index].Name = item.OperatorName;
							})
							that.EList = res.data.ResultMsg;
							that.TempEList = res.data.ResultMsg;
							that.SearchName = ""
							// that.ClientNameList =JSON.stringify(res.data.ResultMsg) ;
						}
					} else {
						Api.showTip("服务器连接超时")
					}
				});
			},
			//打开弹框
			chooseModal(type) {
				switch (type) {
					case 0:
						this.StoreModal = true;
						this.isStore = true
						this.ShowStore()
						break;
					case 1:
						this.StoreModal = true;
						this.isStore = false
						this.ShowOperator()
						break;
				}
			},
			//关闭弹框
			hideModal() {
				this.StoreModal = false
			},
			selectScanGood(index) {
				console.log(index)

				this.StoreModal = false
				if (this.isStore == true) {
					this.StoreName = this.TempEList[index].Name
					this.StoreID = this.TempEList[index].StoreID
				} else {
					this.OperatorName = this.TempEList[index].Name
					this.EmpID = this.TempEList[index].OperatorID
				}
			},
			//搜索
			searchStore() {
				// if (this.isStore == true) {
				// 	if (this.SearchEName != '') {
				// 		let Filter = "StoreName like '%" + this.SearchName + "%' or StoreCode like '%" + this.SearchName + "%'";
				// 		this.ShowStore(Filter);
				// 	} else {
				// 		this.ShowStore();
				// 	}
				// } else {
				// 	if (this.SearchEName != '') {
				// 		let Filter = "OperatorName like '%" + this.SearchName + "%' or OperatorID like '%" + this.SearchName + "%'";
				// 		this.ShowOperator(Filter);
				// 	} else {
				// 		this.ShowOperator();
				// 	}
				// }
				let data = {
					detail:{
						value:this.SearchName
					}
				}
				this.filter(data);

			},

			custormInput() {
				console.log(this);
			},
			//修改数据
			// 			changeDate() {
			// 				var pages = getCurrentPages(),
			// 					prevPage = null;
			// 				if (pages.length > 1) {
			// 					prevPage = pages[pages.length - 2];
			// 				}
			// 				var that = this;
			// 				let data = {
			// 					StartDate: this.startTime,
			// 					EndDate: this.endTime,
			// 
			// 				};
			// 				if (this.BillNo != "") {
			// 					data.BillNo = this.BillNo;
			// 				}
			// 				if (this.BName != "") {
			// 					data.BName = this.BName;
			// 				}
			// 				if (this.EmpID != "") {
			// 					data.EmpID = this.EmpID;
			// 				}
			// 				if (this.StoreID != "") {
			// 					data.StoreID = this.StoreID;
			// 				}
			// 
			// 				this.$eventHub.$emit('fire', data);
			// 				uni.navigateBack({
			// 					delta: 1
			// 				})
			// 			},
			// #ifndef MP
			onNavigationBarButtonTap(e) {
				const index = e.index;
				if (index === 0) {
					// var pages = getCurrentPages(),
					// 	prevPage = null;
					// if (pages.length > 1) {
					// 	prevPage = pages[pages.length - 2];
					// }
					// var that = this;
					// let data = {
					// 	StartDate: this.startTime,
					// 	EndDate: this.endTime,
					// };
					// if (this.BillNo != "") {
					// 	data.BillNo = this.BillNo;
					// }
					// if (this.BName != "") {
					// 	data.BName = this.BName;
					// }
					// if (this.EmpID != "") {
					// 	data.EmpID = this.EmpID;
					// }
					// if (this.StoreID != "") {
					// 	data.StoreID = this.StoreID;
					// }

					// this.$eventHub.$emit('fire', data);
					// uni.navigateBack({
					// 	delta: 1
					// })
					this.filterSure();
				}
			},
			//确定过滤条件
			filterSure(){
				var pages = getCurrentPages(),
					prevPage = null;
				if (pages.length > 1) {
					prevPage = pages[pages.length - 2];
				}
				var that = this;
				let data = {
					StartDate: this.startTime,
					EndDate: this.endTime,
				};
				if (this.BillNo != "") {
					data.BillNo = this.BillNo;
				}
				if (this.BName != "") {
					data.BName = this.BName;
				}
				if (this.EmpID != "") {
					data.EmpID = this.EmpID;
				}
				if (this.StoreID != "") {
					data.StoreID = this.StoreID;
				}
				
				this.$eventHub.$emit('fire', data);
				uni.navigateBack({
					delta: 1
				})
			},
			// #endif
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeShow(name, type) {
				this.startAndEndTime = type;
				this.$refs[name].show();
				this.dateName = name;
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {

			},
			confirm(res) {
				if (this.startAndEndTime == 0) {
					this.startTime = res.data;
				} else {
					this.endTime = res.data;
				}
				this.$refs[this.dateName].hide();
			},

			//获取焦点显示按钮
			showbtn() {
				this.showcxbtn = true;
			},
			//获取焦点显示按钮
			hidenbtn() {
				// this.showcxbtn = false;
			},
			showBName() {
				this.AddListen()
				uni.navigateTo({
					url: '../clientSelect/clientSelect?isClient=2'
				})
			},
        
			AddListen() {
				var _this = this;
				let data = {
					BName: this.BName
				}
				this.$eventHub.$on('clientListen', function(data) {
					// console.log(data);
					data = JSON.parse(data);
					// _this.Obj = JSON.parse(ClientItem);
					// _this.ClientName = _this.Obj.ClientName
					_this.BName = data.ClientName;
					// _this.BillNo = 
					// _this.ClientID = JSON.parse(data.ClientID)
					_this.$eventHub.$off('clientListen');
					// console.log(ClientName)
				});
			},
		}
	};
</script>

<style lang="scss" scoped >
	@import '@/static/bbCss/bbFilter.scss'
	// $bb-bg-color:rgba(124, 170, 216, 1);

	// button::after {
	// 	border: none;
	// 	padding: 0px;
	// }

	// page {
	// 	width: 100%;
	// 	height: 100%;
	// 	background: #ebebeb;
	// }

	// .filterWrapper {
	// 	background: #FFF;
	// 	padding-bottom: 15upx;
	// }

	// .title-padding {
	// 	height: var(--status-bar-height);
	// 	background: $bb-bg-color;
	// 	box-sizing: content-box;
	// }

	// .filterHeader {
	// 	width: 100%;
	// 	height: 50px;
	// 	line-height: 50px;
	// 	position: relative;
	// 	text-align: center;
	// 	background: $bb-bg-color;
	// 	color: #FFF;
	// 	font-size: 18px;
	// 	background-size: 100%;

	// 	.pd {
	// 		display: inline-block;
	// 		position: absolute;
	// 		margin-left: 10px;
	// 		top: 30upx;
	// 		left: 0px;
	// 		font-size: 14px;
	// 		width: 40upx;
	// 		height: 40upx;
	// 		background: url(../../static/back.png) no-repeat;
	// 		background-size: 100%;
	// 	}

	// 	.options {
	// 		position: absolute;
	// 		right: 0px;
	// 		top: 10px;
	// 		width: 80px;
	// 		display: flex;
	// 		text-align: right;

	// 		.setting {
	// 			width: 30px;
	// 			height: 30px;
	// 			background: url(../../static/sureFilter.png) no-repeat;
	// 			background-size: 30px;
	// 			border: none;
	// 			margin-left: 90upx;

	// 		}
	// 	}

	// }

	// .filterItem {
	// 	height: 100upx;
	// 	line-height: 100upx;
	// 	background: #FFF;
	// 	display: flex;
	// 	flex-direction: row;
	// 	box-sizing: border-box;
	// 	padding-left: 30upx;
	// 	padding-right: 30upx;
	// 	font-size: 28upx;
	// 	background: #FFF;

	// 	text {
	// 		flex: 1;
	// 		&:last-child {
	// 			text-align: right;
	// 		}
	// 	}

	// 	.stop {
	// 		background-color: rgb(124, 170, 216);
	// 	}
	// 	input {
	// 		flex: 2;
	// 		height: 60upx;
	// 		line-height: 60upx;
	// 		margin-top: 20upx;
	// 		border-bottom: 1px solid #ebebeb;
	// 		margin-right: 8upx;
	// 		font-size: 28upx;
	// 	}
 //        button{
	// 		width: auto;
	// 		padding-left: 10px;
	// 		padding-right: 10px;
	// 		height: 60upx;
	// 		line-height: 60upx;
	// 		margin-top: 20upx;
	// 		font-size: 22upx;
	// 	}
	// 	view.selectInput {
	// 		flex: 1;
	// 		height: 60upx;
	// 		line-height: 60upx;
	// 		margin-top: 22upx;
	// 		border-bottom: 1px solid #ebebeb;

	// 		input {
	// 			flex: 1;
	// 			height: 40upx;
	// 			line-height: 40upx;
	// 			margin-top: 50upx;
	// 			border-bottom: 1px solid #ebebeb;
	// 		}
	// 	}
	// }

	// .padding-xl .searchStore {
	// 	display: flex;
	// 	width: 100%;
	// 	margin: auto;
	// 	height: 45px;
	// 	padding-top: 5px;
	// 	font-size: 14px;
	// }

	// .padding-xl .searchStore input {
	// 	flex: 1;
	// 	height: 35px;
	// 	border: 1px solid #CCC;
	// 	border-top-left-radius: 5px;
	// 	border-bottom-left-radius: 5px;
	// 	padding-left: 10px;
	// 	text-align: left;
	// }

	// .padding-xl {
	// 	padding: 10px;

	// }

	// .padding-xl .searchStore button {
	// 	font-size: 14px;
	// 	color: #FFF;
	// 	padding-left: 8px;
	// 	padding-right: 8px;
	// 	height: 35px;
	// 	line-height: 35px;
	// 	border-radius: 0px;
	// 	border-top-right-radius: 5px;
	// 	border-bottom-right-radius: 5px;
	// 	text-align: center;
	// 	background: rgba(124, 170, 216, 1);
	// }

	// .padding-xl .StoreListWrap {
	// 	height: 250px;
	// 	overflow: auto;
	// }

	// .padding-xl .StoreListWrap view {
	// 	height: 40px;
	// 	line-height: 40px;
	// 	text-align: left;
	// 	border-bottom: 1px solid #CCC;
	// 	padding-left: 8px;
	// }
</style>
